<template>
  <el-card :body-style="{ padding: '0px' }">
    <div class="carditem">
      <div>
        <h2 class="aboutMe">关于我：</h2>
        <div>
          <img class="avatar"
            src="https://portrait.gitee.com/uploads/avatars/user/2180/6541235_rours_1648913000.png!avatar100" />
        </div>
        <p>
          <span>鶸鸪</span>
        </p>
        <p>
          <span>男、99后</span>
        </p>
        <p>
          <span>软工专升本学生、现居广西来宾</span>
        </p>
        <p>
          <span>一名后端开发，为未来更好的明天而努力</span>
        </p>
        <p>
          <span>
            喜欢编程,喜欢探索新技术。热爱健身,电子音乐,羽毛球乒乓球,游泳,学习
          </span>
        </p>
        <p>
          <span> 这条路上的你并不是孤军奋战，有千千万万的猿在陪你前行 </span>
        </p>
        <p>
          <span> 联系方式：2453580912@qq.com </span>
        </p>
        <p>
          <span>
            Gitee地址：<a :href="giteeurl">https://gitee.com/rours</a>
          </span>
        </p>
        <p>
          <span>
            Github地址：<a :href="githuburl">https://github.com/Rourss</a>
          </span>
        </p>
        <div class="bottom">
          <em class="endcontent">
            本Web服务开源，源码已上传到gitee。前端展示使用Vue+Element UI，后端使用SpringBoot+Maven。如果有不清楚的欢迎来信。
          </em>
        </div>
      </div>
    </div>
    <div class="revert">
      <el-button type="primary" class="revertbtn" round @click="Change()">
        主页
      </el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  props: [],
  data() {
    return {
      giteeurl: "https://gitee.com/rours",
      githuburl: "https://github.com/Rourss",
      viewname: "Login",
    };
  },
  methods: {
    Change() {
      this.$store.commit("Change", { id: 0, name: this.viewname });
    },
  },
};
</script>

<style scoped>
.aboutMe {
  width: 100px;
  padding-left: 20px;
}

.el-card.is-always-shadow {
  border: 0px;
  box-shadow: 0 0 0 0;
  background-color: rgb(254, 246, 231);
  transition: all 0.5s;
  border: 1px solid #ffe0b4;
  border-top: 0px;
}

.carditem {
  text-align: center;
  width: 100%;
  height: 100%;
}

p {
  padding: 5px;
  font-size: 15px;
  font-weight: bold;
  white-space: pre-wrap;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 10px;
}

.bottom {
  padding-top: 20px;
}

.endcontent {
  font-size: 12px;
  color: red;
}

a {
  color: #e11057;
}

img {
  transition: all 0.6s;
}

img:hover {
  transform: scale(1.2);
}

.el-button-group .el-button--primary:last-child {
  border-left-color: #e11057;
}

.el-button--primary.is-plain {
  color: #e11057;
  background-color: #fef6e7;
  border: 1px solid #e11057;
}

.el-button--primary.is-plain:focus {
  transition: all 0.5s;
  background-color: #e11057;
  border: 1px solid #e11057;
}

.el-button--primary.is-plain:hover {
  transition: all 0.5s;
  background-color: #e11057;
  border: 1px solid #e11057;
}

.revert {
  text-align: center;
  padding-top: 60px;
}

.revertbtn {
  width: 140px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #e11057;
  transition: all 0.5s;
  background-color: #fef6e7;
  border: 1px solid #e11057;
}

.revertbtn:hover {
  transition: all 0.5s;
  background-color: #e11057;
  border: 1px solid #e11057;
}

.revertbtn:focus {
  transition: all 0.5s;
  background-color: #e11057;
  border: 1px solid #e11057;
}
</style>